<%--
  Created by IntelliJ IDEA.
  User: cyrus
  Date: 2022/06/30
  Time: 15:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>看板-图标展示</title>
    <%--引入echarts的js包--%>
    <script src="<%=request.getContextPath()%>/js/echarts.min.js"></script>
</head>
<body>
<%--图标渲染的位置--%>
<%--饼图--%>
<div id="main" style="width: 600px;height:400px;float: left"></div>
<%--折线图--%>
<div id="line" style="height: 400px;width: 600px;float: left"></div>

<%--折线图的js--%>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    <%--var sourceCount = '${sourceCount}'--%>
    // console.log(sourceCount)
    // 得到是json字符串，可以把json字符串专横json对象
    var sourceCount = JSON.parse('${sourceCount}')
    // 指定图表的配置项和数据
    var option  = {
        title: {
            text:"数据来源占比"
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '数据源头统计',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                // 编程后台传递过来的数据
                // json数组的形式
                data: sourceCount
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<%--饼图的js--%>
<script>
    var lineChart = echarts.init(document.getElementById('line'));
    var lineOption = {
        title: {
            text:"时间变化趋势"
        },
        xAxis: {
            type: 'category',
            // 时间
            data: JSON.parse('${timeArr}')
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                // 对应的每个是的新闻的个数
                data:JSON.parse('${valueArr}'),
                type: 'line',
                smooth: true
            }
        ]
    };
    lineChart.setOption(lineOption)
</script>


</body>
</html>
